<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2024/6/4
  Time: 11:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>主页面</title>
    <%--引入elementui的css样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <%--引入vue文件:必须先引入vue--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入elementui的js文件--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <%--引入axios--%>
    <script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="logo">
                <img src="/images/logo.jpg" style="height: 100%;float: left;display: block"/>
                <h3 style="width: 65%;height: 100%;line-height: 60px;padding-left:10px;margin-top:0px; float: left;">
                    菜先生</h3>
            </div>
            <div class="nav">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item @click="location.href='/main'">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="head">
                <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link">
                      {{empinfo.ename}}
                      <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                    <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="logout">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside width="210px">
                <el-menu
                        class="el-menu-vertical-demo"
                        :unique-opened="true"
                >
                      <%--el-submenu:表示一级菜单--%>
                        <el-submenu :index="item.id+''" v-for="(item,index) in leftMenus">
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{item.pname}}</span>
                            </template>
                            <%--el-menu-item:表示二级菜单--%>
                            <el-menu-item :index="c.id+''" v-for="c in item.children">
                               <a target="main" :href="c.url" style="text-decoration: none;color: black;"><i :class="c.icon"></i>{{c.pname}}</a>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe name="main" width="100%" height="100%" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //表示当前登录者
            empinfo: undefined,
            //左侧菜单
            leftMenus:[],
        },
        created() {
            //获取当前登录者的信息
            this.loadEmpInfo();
            //加载左侧菜单
            this.leftMenu();
        },
        methods: {
            //加载左侧菜单
            leftMenu(){
               axios.get("/permission/leftMenu").then(result=>{
                     this.leftMenus=result.data.data;
               })
            },
            loadEmpInfo() {
                axios.get("/empinfo/info").then(result => {
                    if (result.data.code === 2000) {
                        this.empinfo = result.data.data;
                    }else{
                        this.$message.error(result.data.msg);
                        setTimeout(function () {
                            location.href="/adminLogin.jsp"
                        },1000)
                    }
                })
            },
            handleCommand(command) {
                if(command==="info"){
                    alert("个人中心的操作")
                }else if(command==="updatePwd"){

                }else{
                    axios.get("/empinfo/logout").then(result=>{
                         if(result.data.code===2000){
                              //跳转
                             location.href="/adminLogin.jsp"
                             //退出成功
                             this.$message.success(result.data.msg);
                         }
                    })
                }
            },
        }
    })
</script>
<style>
    html, body, #app {
        margin: 0px;
        padding: 0px;
        font-size: 12px;
    }
     .el-container {
         height: 100%;
     }

    .el-header {
        background-color: #ffffff;
        color: black;
        line-height: 60px;

    }

    .el-header > .logo {
        width: 210px;
        height: 100%;
        float: left;
        margin-left: -20px;
    }

    .el-header > .nav {
        width: 20%;
        height: 100%;
        line-height: 60px;
        float: left;
    }

    .el-header > .head {
        width: 50%;
        height: 100%;
        float: right;
        text-align: right;
    }

    span.el-avatar.el-avatar--square {
        margin-top: 10px;
    }

    .el-breadcrumb {
        line-height: 60px;
    }

    .el-aside {
        height: 100%;
        background-color: #ffffff;
        color: black;
        overflow-x: hidden;
        overflow-y: hidden;
        white-space: nowrap;
    }

    .el-main {
        background-color: #F8F8FF;
        color: #333;
        border-radius: 5px;
        height: 100%;

    }

    .el-card__body, .el-main {
        padding: 5px;
    }



</style>
</html>
